<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { TableInstance } from 'element-plus'
import axios from 'axios'
import ajax from "../main.ts";

interface CommentItem {
  id: number
  mcpName: string
  avatar: string
  author: string
  content: string
  createTime: string
}

interface QueryParams {
  keyword: string
  page: number
  pageSize: number
}

const tableData = ref<CommentItem[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const searchKeyword = ref('')

// 获取评论列表数据
const getCommentList = async () => {
  loading.value = true
  try {
    const params: QueryParams = {
      keyword: searchKeyword.value,
      page: currentPage.value,
      pageSize: pageSize.value
    }
    
    const { data } = await ajax.get('getCommentsManage/', { params })
    if (data.code === 200) {
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage.error(data.msg || '获取数据失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  getCommentList()
}

// 处理页码改变
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  getCommentList()
}

// 处理每页条数改变
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  getCommentList()
}

// 删除评论
const handleDelete = (row: CommentItem) => {
  ElMessageBox.confirm(
    '确认要删除这条评论吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const { data } = await ajax.delete('delComment/', { params: { id: row.id }})
      if (data.code === 200) {
        ElMessage.success('删除成功')
        await getCommentList()
      } else {
        ElMessage.error(data.msg || '删除失败')
      }
    } catch (error) {
      ElMessage.error('网络请求失败')
    }
  })
}

onMounted(() => {
  getCommentList()
})
</script>

<template>
  <div class="comments-manage">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入关键词搜索"
        class="search-input"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </template>
      </el-input>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="id"
        label="评论ID"
        width="80"
      />
      <el-table-column
        prop="mcpName"
        label="MCP名称"
        width="200"
      />
      <el-table-column
        label="头像"
        width="80"
      >
        <template #default="{ row }">
          <el-avatar :size="40" :src="row.avatar" />
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="评论人"
        width="180"
      />
      <el-table-column
        prop="content"
        label="评论内容"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="评论时间"
        width="160"
      />
      <el-table-column
        label="操作"
        width="100"
        fixed="right"
      >
        <template #default="{ row }">
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped>
.comments-manage {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input-group__append) {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
  color: #fff;
}

.search-input :deep(.el-input-group__append:hover) {
  background-color: var(--el-color-primary-light-3);
  border-color: var(--el-color-primary-light-3);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  border-radius: 4px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: var(--el-color-primary-light-9);
}
</style>